<template>
  <div>
    <!-- 打卡排行榜 -->
    <div
      class="flex-1 bg-white border-solid rounded-md overflow-hidden mt-1 px-3 min-h-[10.5rem]"
    >
      <!-- title -->
      <span class="text-[0.6rem] flex justify-center py-2">每日打卡排行榜</span>
      <!-- userList -->
      <div class="flex flex-col overflow-y-auto max-h-[9rem]">
        <div class="mb-2" v-for="(item, index) in items" :key="item.id">
          <ClockInUser
            :item="item"
            :ref=" (el) => (index === items.length - 1 ?(lastItemRef = el as HTMLElement) : '' )"
          />
        </div>
      </div>
      <div class="text-center" v-if="!hasMore">没有更多了</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import ClockInUser from "@/components/HomePage/ClockInUser.vue";
import { ClockInUserType } from "@/types/clockInUser";
import useIntersectionObserver from "@/hooks/useIntersectionObserver.ts";

const lastItemRef = ref<HTMLElement | null>(null);


const props = defineProps<{
  // 数据
  items: ClockInUserType[];
  // 获取下一页的方法
  next: (setHasMore: (value: boolean) => void) => void;
}>();

const { hasMore, setHasMore } = useIntersectionObserver(lastItemRef, () => {
  props.next(setHasMore);
});
</script>

<style lang="scss" scoped></style>
